
<template>
  <div id="qrcode">
  		<magic-header  v-if="!isWxPublic" titleName="码上挪车"></magic-header>
        <section>
			<article class="scan">
				<img v-show="logoShow" id="logo" :src="flagImg"/>
				<img v-show="wxLogoShow" id="wxLogo" :src="vfhz"/>
				<div id="wrapper">
					<button v-show="scanShow" class="mui-btn mui-btn-block mui-btn-yellow" id="scan" @click="scan">
    					开启扫码挪车
    				</button>
					<a class="mui-btn mui-btn-block mui-btn-yellow" v-show="telShow" :href="tel" id='tel'>
						确认拨打挪车电话
					</a>
					<button class="mui-btn mui-btn-block mui-btn-yellow" v-show="downShow" id='go_down_page' style="display: none;">
						长按二维码关注V服惠众
					</button>
          <button class="mui-btn mui-btn-block mui-btn-yellow" v-show="goMyQrShow" id='go_qrcode_mine' @click="go">
						查看我的二维码
					</button>
				</div>
			</article>
		</section>
        <section>
			<div id="phoneModel" v-show="modelShow">
				<div class="modal-content">
					<h3 id="title">{{titleText}}</h3>
					<ul class="buttonBox">
						<li><input id="cancel" class="mui-pull-left" type="button" value="取消" @click="cancel"></li>
						<li><input id="apply" class="mui-pull-right" type="button" value="确认" @click="apply"></li>
					</ul>
				</div>
			</div>
		</section>
  </div>
</template>

<script>
import magicHeader from "components/magicHeader";
import flagImg from "assets/flagImg.png";
import vfhz from "assets/vfhz.png";
import wx from "weixin-js-sdk";
import QueryUserInfoService from "services/common/QueryUserInfo";
export default {
  data() {
    return {
      tel: "tel:123456", //扫码进入挪车码拨打电话
      codeMobile: 123456789123, //扫码进入获取挪车码电话
      sendCode: "",
      shopId: "",
      moveCarCode: "", //挪车码
      userId: "",
      codeId: "",
      mobile: "", //用户电话
      flagImg,
      vfhz,
      titleText: "",
      isWxPublic: false,
      scanShow: false,
      logoShow: false,
      telShow: false,
      downShow: false,
      wxLogoShow: false,
      modelShow: false,
      goMyQrShow: false
    };
  },
  created() {
    //获取shopId =
    this.shopId = this.$.shopId;
    //获取用户信息
    let user = JSON.parse(localStorage.getItem("user"));
    this.userId = user.userId;
    this.mobile = user.mobile;
    if (this.$.env === "wxPublic") {
      this.isWxPublic = true;
      //微信签名注册
      this.getSign();
      if (this.$.query("id") != "") {
        this.codeId = this.$.query("id");
      } else if (this.$.query("state") != "") {
        this.codeId = this.$.query("state");
      }
      //从url扫码进入查看挪车码是否有挪车电话 显示不同内容
      alert("codeId " + this.codeId);
      this.hasMobile(this.codeId).then(res => {
        alert(JSON.stringify(res));
        if (this.codeId.length < 8) {
          this.scanShow = true;
          this.logoShow = true;
        } else {
          if (res.mobile.length == 11) {
            this.scanShow = false;
            this.telShow = true;
            this.logoShow = true;
            this.tel = "tel:" + res.mobile;
          } else {
            this.downShow = true;
            this.wxLogoShow = true;
          }
        }
      });
    } else {
      QueryUserInfoService.bind(this)(
        {},
        res => {
          console.log(res);
          this.mobile = res.userMobile;
        },
        err => {}
      );
      this.scanShow = true;
      this.logoShow = true;
      this.goMyQrShow = true;
    }
  },
  methods: {
    cancel() {
      this.modelShow = false;
    },
    go() {
      if (this.$.userId) {
        this.$router.push({
          name: "qrcode_mine"
        });
      } else {
        this.$.login({
          name: "login"
        });
      }
    },
    apply() {
      let vm = this;
      this.hasMoveCarCode(this.sendCode, this.codeMobile).then(function(res) {
        alert(JSON.stringify(res) + "```````````````````````");
        vm.$.toast("您已成功绑定挪车码");
        vm.$router.push({
          name: "qrcode_mine"
        });
      });
    },
    //扫码功能
    scan() {
      let vm = this;
      if (this.isWxPublic) {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            alert(res.resultStr);
            var code = res.resultStr; 
            vm.sendCode = code.split("=")[2];
            alert(vm.sendCode);
            alert(vm.sendCode === undefined || vm.sendCode.length !== 8);
            if (vm.sendCode === undefined || vm.sendCode.length !== 8) {
              vm.$.toast("无法识别的二维码");
              return;
            }
            vm.hasMobile(vm.sendCode).then(res => {
              alert(JSON.stringify(res));
              alert(res.mobile == "");
              if (res.mobile == "") {
                //mobile为用户手机号判断是否注册
                alert(vm.mobile);
                if (
                  vm.mobile == "" ||
                  vm.mobile == null ||
                  vm.mobile == undefined
                ) {
                  vm.$.login({
                    name: "login"
                  });
                } else {
                  alert("vm.getMobile");
                  vm.getMobile().then(res => {
                    alert(JSON.stringify(res));
                    if (res.mobile == "") {
                      alert(222);
                      //codeMobile为挪车码绑定手机
                      vm.codeMobile = vm.mobile;
                      vm.modelShow = true;
                      vm.titleText = "您尚未绑定挪车码,是否绑定该挪车码";
                    } else {
                      alert(333);
                      vm.codeMobile = res.mobile;
                      vm.modelShow = true;
                      vm.titleText =
                        "您已绑定其他挪车码，需解绑并绑定此挪车码？";
                      document.getElementById("apply").innerText = "绑定新码";
                    }
                  });
                }
                //电话不为空直接拨打
              } else if (res.mobile.length == 11) {
                alert(res.mobile);
                vm.codeMobile = res.mobile;
                vm.$router.push({
                  name: "make_call",
                  params: {
                    phoneNumber: vm.codeMobile
                  }
                });
              }
            });
          }
        });
      } else {
        alert("开始扫码");
        this.$.push("router_scan", {}, res => {
          if(this.$.query('isIos')==='true'){
            res = JSON.parse(res)
            vm.sendCode = res.code;
          }else{
            var code = res.resultStr; 
            vm.sendCode = code.split("=")[2];
          }
          if (vm.sendCode === undefined || vm.sendCode.length !== 8) {
            this.$.toast("无法识别的二维码");
            return;
          }
          vm.hasMobile(vm.sendCode).then(res => {
            alert(JSON.stringify(res));
            alert(res.mobile == "");
            if (res.mobile == "") {
              //mobile为用户手机号判断是否注册
              alert(vm.mobile);
              if (
                vm.mobile == "" ||
                vm.mobile == null ||
                vm.mobile == undefined
              ) {
                vm.$.login({
                  name: "login"
                });
              } else {
                alert("vm.getMobile");
                vm.getMobile().then(res => {
                  alert(res);
                  if (res.mobile == "") {
                    //codeMobile为挪车码绑定手机
                    vm.codeMobile = mobile;
                    vm.modelShow = true;
                    vm.titleText = "您尚未绑定挪车码,是否绑定该挪车码";
                  } else {
                    vm.codeMobile = res.mobile;
                    vm.modelShow = true;
                    vm.titleText = "您已绑定其他挪车码，需解绑并绑定此挪车码？";
                    document.getElementById("apply").innerText = "绑定新码";
                  }
                });
              }
              //电话不为空直接拨打
            } else if (res.mobile.length == 11) {
              vm.codeMobile = res.mobile;
              this.$.push(
                "router_callOthers",
                {
                  phone:  vm.codeMobile
                },
                () => {
                  console.log("调用成功");
                }
              );
            }
          });
        });
      }
    },
    getSign() {
      let signHref = location.href.split("#")[0];
      let signOpenId = this.$.state;
      let signUrlInfo = encodeURIComponent(signHref);
      let signData = {
        clientType: '3',
        methodName: "QueryJssdkConfig",
        shopId: "",
        userId: "",
        urlInfo: signUrlInfo,
        wechatOpenId: signOpenId
      };
      this.$.wxGet(signData).then(res => {
        res = res.data;
        alert("res: ", res);
        wx.config({
          debug: false,
          appId: res.appId,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ["scanQRCode"]
        });
      });
    },
    //挪车码查询手机号
    hasMobile(moveCarCode) {
      return new Promise(
        function(resolve, reject) {
          this.$.get({
            moveCarCode: moveCarCode,
            methodName: "QueryMoveCarMobile",
            shopId: this.shopId || ""
          }).then(resp => {
            if (resp.data.resultCode === "100") {
              resolve(resp.data);
            } else {
              this.$.toast("服务器错误");
            }
          });
        }.bind(this)
      );
    },
    //绑定修改电话
    hasMoveCarCode(moveCarCode, mobile) {
      return new Promise(
        function(resolve, reject) {
          this.$.get({
            clientType: "3",
            mobile: mobile,
            moveCarCode: moveCarCode,
            methodName: "UpdateMoveCarBinding",
            shopId: this.shopId || "",
            userId: this.userId || ""
          }).then(resp => {
            if (resp.data.resultCode === "100") {
              resolve(resp.data);
            } else {
              this.$.toast("服务器错误");
            }
          });
        }.bind(this)
      );
    },
    //获取用户挪车信息
    getMobile() {
      return new Promise(
        function(resolve, reject) {
          this.$.get({
            clientType: "3",
            methodName: "QueryMoveCar",
            shopId: this.shopId || "",
            userId: this.userId || ""
          }).then(resp => {
            if (resp.data.resultCode === "100") {
              resolve(resp.data);
            } else {
              this.$.toast("服务器错误");
            }
          });
        }.bind(this)
      );
    },
    getMoveCarCode() {
      return new Promise(
        function(resolve, reject) {
          this.$.get({
            clientType: "3",
            mobile: this.codeMobile,
            methodName: "QueryMoveCar",
            shopId: this.shopId || "",
            userId: this.userId || ""
          }).then(resp => {
            if (resp.data.resultCode === "100") {
              resolve(resp.data);
            } else {
              reject(resp.data);
              this.$.toast("服务器错误");
            }
          });
        }.bind(this)
      );
    }
  },
  components: {
    magicHeader
  }
};
</script>
<style scoped="scoped">
#qrcode .scan {
  padding: 1rem;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  padding-top: 1rem;
}

#qrcode .scan #logo {
  width: 50%;
  margin: auto;
  margin-bottom: 1rem;
  border-radius: 100%;
}

#qrcode .scan #wxLogo {
  width: 90%;
  margin: auto;
  margin-bottom: 1rem;
}

#qrcode #phoneModel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 5%;
}

#qrcode #phoneModel .modal-content {
  flex: auto;
  width: 90%;
  padding-bottom: 5px;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
}

#qrcode #phoneModel .modal-content h3 {
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
}

#qrcode #phoneModel .modal-content .inputBox li {
  width: 90%;
  margin: 5px auto;
}

#qrcode #phoneModel .modal-content .inputBox li input {
  height: 34px;
  line-height: 34px;
  border-radius: 5px;
  border: 1px solid #909090;
  padding: 0 5px !important;
}

#qrcode #phoneModel .modal-content .buttonBox {
  width: 90%;
  margin: 5px auto;
  display: flex;
}

#qrcode #phoneModel .modal-content .buttonBox li {
  flex: 1;
}

#qrcode #phoneModel .modal-content .buttonBox li input {
  height: 30px;
  line-height: 30px;
  width: 90%;
  border: none;
  text-align: center;
  color: #f78800;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 0 !important;
}
#qrcode .mui-btn-block {
  font-size: 18px;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 15px 0;
}
#qrcode .mui-btn-yellow {
  color: #fff;
  border: 1px solid #f0ad4e;
  background-color: #f0ad4e;
}
#qrcode .mui-btn {
  font-size: 14px;
  font-weight: 400;
  height: 44px;
  line-height: 30px;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  padding: 6px 12px;
  cursor: pointer;
  -webkit-transition: all;
  transition: all;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: #fff;
  background-clip: padding-box;
}
#qrcode .mui-pull-left {
  float: left;
}
#qrcode .mui-pull-right {
  float: right;
}
#qrcode #go_down_page {
  color: #fff;
  background-color: #f0ad4e;
}
#qrcode #scan {
  color: #fff;
  background-color: #f0ad4e;
}
#qrcode #tel {
  color: #fff;
  background-color: #f0ad4e;
}
#qrcode #go_qrcode_mine {
  background-color: #f0ad4e;
  margin-top: 10px;
  color: #fff;
}
</style>